<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>h.264 To fmp4</title>
	<script src="js/jquery-3.0.0.js"> </script>
	<script src="js/wfs.js"></script>
	<!-- <link href="js/jquery/jquery-ui.css" rel="stylesheet" type="text/css" /> -->

	<style type="text/css" media="screen">
		video.rotate180 {
			width: 100%;
			height: 100%;
			transform: rotateX(180deg);
			-moz-transform: rotateX(180deg);
			-webkit-transform: rotateX(180deg);
			-o-transform: rotateX(180deg);
			-ms-transform: rotateX(180deg);
		}
	</style>
</head>

<body>
	<h2>h.264 To fmp4</h2>
	<button id="loginAndPlayView">登录并预览</button>
	<div class="wfsjs">
		<video id="video1" muted="muted" controls="controls" style="width: 50%;height: 50%;" autoplay="autoplay"
			muted></video>
		<div class="ratio"></div>
	</div>

	<script>
		var mypath = "http://127.0.0.1:10086";

		/**
		 * 登录并预览按钮点击：先请求 登录+预览接口，然后返回将返回的lUserID拼接到socket地址后面，创建一个websocket。
		 * 然后创建wfs实列 ，执行wfs.attachWebsocket()和wfs.attachMedia(),最后将socket和vide标签绑定给创建的wfs即可
		 */
		$("#loginAndPlayView").click(function () {

			var loginVo = {
				"userName": "admin",    //摄像头登录账号
				"password": "hik12345", //摄像头登录账号
				"ip": "192.168.0.110", //摄像头ip
				"prot": "8000"  //摄像头端口
			}
			$.ajax({
				type: 'post',
				url: mypath + "/playvision/loginAndPlayView",
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: JSON.stringify(loginVo),
				xhrFields: { withCredentials: false },
				success: function (res) {
					console.log(res)
					if (res.code && res.data && res.data.loginStatus == "1") {
						var luserID = res.data.luserID;
						var lplayID = res.data.lplayID;
						if (Wfs.isSupported()) {
							var video1 = document.getElementById("video1");
							var wfs = new Wfs();
							var my_websocket_path = "ws://127.0.0.1:10086";
							var socket = new WebSocket(my_websocket_path + "/wstest/" + luserID);
							wfs.attachMedia(video1, luserID + "_" + lplayID);    //绑定video标签
							wfs.attachWebsocket(socket, luserID + "_" + lplayID)  //绑定socket
						}
					}
					else {
						alert("播放失败，错误信息：" + ((res.data && res.data.loginMessage) ? res.data.loginMessage : ""))
					}
				}
			});
		})
	</script>

</body>

</html>